﻿<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../helpproject.xsl" ?>
<topic template="Default" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../helpproject.xsd">
  <title translate="true">Catel.Extensions.Prism</title>
  <keywords>
    <keyword translate="true">Prism</keyword>
  </keywords>
  <body>
    <header>
      <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Catel.Extensions.Prism</text></para>
    </header>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Starting with Catel 3.1 the </text><link displaytype="text" defaultstyle="true" type="weblink" href="http://compositewpf.codeplex.com" target="_blank" styleclass="Normal" translate="true">Prism</link><text styleclass="Normal" translate="true"> extension is available.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">The latest version of the guidance, </text><link displaytype="text" defaultstyle="true" type="weblink" href="http://compositewpf.codeplex.com" target="_blank" styleclass="Normal" translate="true">Prism</link><text styleclass="Normal" translate="true">, includes a feature named &quot;User Interface Composition&quot;. Basically it allows build a mosaic like application by loading multiple views that comes from different modules into an active regions exposed by a control, also know as the shell.</text></para>
    <para styleclass="Normal"><image src="prism_ui_composition_example.png" scale="100.00%" styleclass="Image Caption"></image></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">But all this is about view models. Therefore, the Catel team decide to introduce an extension that implements a good starting point in order create a composite user interface without actually referencing any view. At this point, you must have heared about of the </text><link displaytype="text" defaultstyle="true" type="topiclink" href="MVVM_Services_UIVisualizerService" styleclass="Normal" translate="true">UIVisualizerService</link><text styleclass="Normal" translate="true">, and the way it can resolve a view from an instance of a view model.</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Making the region manager available</text></para>
    <para styleclass="Heading1"><text styleclass="Normal" translate="true">First of all, you must make available the region manager on the instance of </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_IoC_ServiceLocator" styleclass="Normal" translate="true">ServiceLocator</link><text styleclass="Normal" translate="true">. A </text><link displaytype="text" defaultstyle="true" type="weblink" href="http://compositewpf.codeplex.com" target="_blank" styleclass="Normal" translate="true">Prism</link><text styleclass="Normal" translate="true"> based application uses </text><link displaytype="text" defaultstyle="true" type="topiclink" href="IoC_Using_MEF_as_primary_IoC_conta" styleclass="Normal" translate="true">MEF</link><text styleclass="Normal" translate="true"> or </text><link displaytype="text" defaultstyle="true" type="topiclink" href="IoC_Using_Unity_as_primary_IoC_con" styleclass="Normal" translate="true">Unity</link><text styleclass="Normal" translate="true"> as primary </text><link displaytype="text" defaultstyle="true" type="topiclink" href="GEN_IoC" styleclass="Normal" translate="true">IoC</link><text styleclass="Normal" translate="true"> contanier. Therefore, you must synchronize this container with the Catel one, overriding the </text><text styleclass="Normal" style="font-style:italic;" translate="true">ConfigureContainer</text><text styleclass="Normal" translate="true"> method of the application </text><text styleclass="Normal" style="font-style:italic;" translate="true">Bootstrapper</text><text styleclass="Normal" translate="true"> class, using the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:bold;" translate="true">protected</text><text styleclass="Code Example" translate="true"> </text><text styleclass="Code Example" style="font-weight:bold;" translate="true">override void</text><text styleclass="Code Example" translate="true"> ConfigureContainer()</text><br/><text styleclass="Code Example" translate="true">{</text><br/><tab/><text styleclass="Code Example" style="font-weight:bold;" translate="true">base</text><text styleclass="Code Example" translate="true">.ConfigureContainer();</text><br/><text styleclass="Code Example" translate="true">      </text><br/><text styleclass="Code Example" style="font-weight:bold;" translate="true">      if</text><text styleclass="Code Example" translate="true"> (ServiceLocator.Instance.IsExternalContainerSupported(</text><text styleclass="Code Example" style="font-weight:bold;" translate="true">this</text><text styleclass="Code Example" translate="true">.Container))</text><br/><text styleclass="Code Example" translate="true">      {</text><br/><text styleclass="Code Example" translate="true">       </text><tab/><text styleclass="Code Example" translate="true">ServiceLocator.Instance.RegisterExternalContainer(</text><text styleclass="Code Example" style="font-weight:bold;" translate="true">this</text><text styleclass="Code Example" translate="true">.Container);</text><br/><tab/><text styleclass="Code Example" translate="true">}</text><br/><text styleclass="Code Example" translate="true">}</text></para>
    <para styleclass="Heading1"><text styleclass="Normal" translate="true">but if you use </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_IoC_ServiceLocator" styleclass="Normal" translate="true">ServiceLocator</link><text styleclass="Normal" translate="true"> primary </text><link displaytype="text" defaultstyle="true" type="topiclink" href="GEN_IoC" styleclass="Normal" translate="true">IoC</link><text styleclass="Normal" translate="true"> contanier, and your </text><text styleclass="Normal" style="font-style:italic;" translate="true">Bootstrapper</text><text styleclass="Normal" translate="true"> class </text><link displaytype="text" defaultstyle="true" type="topiclink" href="Prism_Using_the_bootstrapper" styleclass="Normal" translate="true">inherits</link><text styleclass="Normal" translate="true"> from </text><text styleclass="Normal" style="font-style:italic;" translate="true">BootstrapperBase </text><text styleclass="Normal" style="font-style:normal;" translate="true">the region manager is actually available and you don&apos;t have to write the synchronization container code.</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">Since Catel 3.2 </text><link displaytype="text" defaultstyle="true" type="topiclink" href="T_Catel_IoC_ServiceLocator" styleclass="Normal" style="font-style:italic;" translate="true">ServiceLocator</link><text styleclass="Notes" translate="true"> support </text><link displaytype="text" defaultstyle="true" type="topiclink" href="IoC_Dependency_injection" styleclass="Notes" translate="true">Dependency injection</link><text styleclass="Notes" translate="true">, therefore now you are able write Prism base application without the usage of a third party container. </text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Activating a view into a specific region</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To activate a view into a specific region, use the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" translate="true">var viewModel = new EmployeeViewModel();</text><br/><br/><text styleclass="Code Example" translate="true">var uiVisualizerService = GetService&lt;IUIVisualizerService&gt;();</text><br/><text styleclass="Code Example" translate="true">uiVisualizerService.Activate(viewModel, &quot;MainRegion&quot;);</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">But if the context allows you to know the instance of the view model of the view owner of the region where you will inject a view, is strongly recommended use the Activate overload that allows you to specify the parent view-model. This call will enforce the view models parent-child relationship:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" translate="true">uiVisualizerService.Activate(viewModel, this, &quot;MainRegion&quot;);</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">Assume that </text><text styleclass="Notes" style="font-weight:bold;" translate="true">this </text><text styleclass="Notes" style="font-weight:normal;" translate="true">references an instance of the view-model of a view with MainRegion region specified, so </text><text styleclass="Notes" style="font-weight:bold;" translate="true">this </text><text styleclass="Notes" style="font-weight:normal;" translate="true">is used as parent view model reference in the previous call.</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Dealing with more than one and only one shell</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">Actually you are able to inject views (referencing it&apos;s view models) in any window. Just like the previous example but in combination with the experimental extension method Show:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">=</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">GetService&lt;IUIVisualizerService&gt;();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">var</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">windowViewModel</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">=</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000000;" translate="true">new</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">WindowWithRegionViewModel();</text><br/><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.Show(windowViewModel,</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">()</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">=&gt;</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">{</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.Activate(</text><text styleclass="Code Example" style="font-weight:bold; font-style:normal; color:#000000;" translate="true">new</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">EmployeeViewModel(),</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">windowViewModel,</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">&quot;WindowMainRegion&quot;)</text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#ffffff;" translate="true"> </text><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">});</text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Deactivating a view</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">To deactivate a view, use the following code:</text></para>
    <para styleclass="Code Example"><text styleclass="Code Example" style="font-weight:normal; font-style:normal; color:#000000;" translate="true">uiVisualizerService.Deactivate(viewModel);</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">If you keep your view model alive (see: </text><link displaytype="text" defaultstyle="true" type="topiclink" href="Keeping_view_models_alive" styleclass="Notes" translate="true">Keeping view models alive</link><text styleclass="Notes" translate="true">), you can reactivate a deactivated the view using Activate method without specify the region name.  </text></para>
    <para styleclass="Heading1"><text styleclass="Heading1" translate="true">Deactivating a view automatically</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">If you close the view model using </text><text styleclass="Normal" style="font-style:italic;" translate="true">SaveAndCloseViewModel</text><text styleclass="Normal" translate="true"> or </text><text styleclass="Normal" style="font-style:italic;" translate="true">CancelAndCloseViewModel</text><text styleclass="Normal" translate="true"> or </text><text styleclass="Normal" style="font-style:italic;" translate="true">CloseViewModel</text><text styleclass="Normal" translate="true"> methods, the view that belongs to this view model will be automatically deactivated from the region where it is activated.</text></para>
    <para styleclass="Normal"><text styleclass="Normal" translate="true">In order to start using this feature, the only thing you have to do is install an isolated package named </text><text styleclass="Normal" style="font-style:italic;" translate="true">Catel.Extensions.Prism</text><text styleclass="Normal" translate="true">, available via </text><link displaytype="text" defaultstyle="true" type="weblink" href="http://www.nuget.org" target="_blank" styleclass="Normal" translate="true">NuGet</link><text styleclass="Normal" translate="true">.</text></para>
    <para styleclass="Notes"><text styleclass="Notes" translate="true">User interface composition feature that comes with Prism extension is only available in NET40, Silverlight 4 and Silverlight 5</text></para>
  </body>
</topic>
